<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css vertical-align</title>
</head>
<body>

    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif "/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: baseline </h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: baseline	"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: inherit</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: inherit"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: text-bottom</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: text-bottom"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: bottom</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: bottom"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: text-top</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: text-top"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: top</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: top"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: sub</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: sub"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: super</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: super"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: middle</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: middle"/>
        位于段落中的图像。
    </p>
    <hr>

    <h1>vertical-align: 20px</h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: 20px"/>
        位于段落中的图像。
    </p>
    <hr>

    <!-- 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。-->
    <h1>vertical-align: 30% </h1>
    <p>
        这是一幅
        <img class="top" border="0" src="../../img/eg_logo_w3school.gif " style="vertical-align: 30%"/>
        位于段落中的图像。
    </p>
    <hr>

</body>
</html>